<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/css/layui.css">
    <script src="lib/layui/layui.js"></script>

</head>
<body>
<h2>门诊查询</h2>
<form class="layui-form" action="">

    <div class="layui-form-item">

        <label class="layui-form-label">门诊名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="name" placeholder="请输入门诊名" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">住院时间</label>
        <div class="layui-input-inline">
            <input type="text" name="created_time" id="created_time" placeholder="请输入住院时间" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">出院时间</label>
        <div class="layui-input-inline">
            <input type="text" name="updated_time" id="updated_time" placeholder="请输入出院时间" autocomplete="off" class="layui-input">
        </div>

        <button class="layui-btn" lay-submit lay-filter="search">查询</button>
    </div>
</form>

<table id="demo" lay-filter="test"></table>
<script>
    layui.use(['table','form','layer'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        //第一个实例
        table.render({
            elem: '#demo',
            id:'departmentTable'
            ,url: '../getDepartments' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID',fixed: 'left'}
                ,{field: 'name', title: '门诊名'}
                ,{field: 'created_time', title: '住院时间'}
                ,{field: 'updated_time', title: '出院时间'}
                ,{fixed: 'right', width:150, align:'center',width:200, toolbar: '#barDemo'}
            ]]
        });

        form.on('submit(search)', function(data){
            table.reload('departmentTable', {
                url: '../getDepartments'
                ,where: {
                    name:$("#name").val(),
                    created_time:$("#created_time").val,
                    updated_time:$("#updated_time").val()
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //工具条事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    $.post("delDepartment",{
                        id:data.id
                    },function (res){
                        if(res.code == "0"){
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                        }
                        layer.msg(res.msg);
                    },"json");
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>